import React from 'react';
import { Text, View, Button } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';

//import socket from './js/wsSocket';
import socket from './js/ioSocket';

import db from './js/sqliteDb';

class SocketScreen extends React.Component {
  constructor() {
    super();

    this.state = {
      clickCount: 0
    };

    socket.create();
  }

  press = () => {
    this.setState((state) => {
      socket.send(state.clickCount++);

      return state;
    });
  }

  render () {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Socket!({this.state.clickCount})</Text>
        <Button onPress={this.press} title="发送信息"></Button>
      </View>
    );
  }
}

class DatabaseScreen extends React.Component {

  constructor() {
    super();

    this.state = {
      selectRows: 0,
      selectResult: null
    };

    db.open();
  }

  press = () => {
    db.execute('SELECT name FROM sqlite_master', null, (tx, results) => {
      this.setState(state => {
        state.selectRows = results.rows.length;
        state.selectResult = results.rows.item(0).name;
        return state;
      });
    });
  }

  render () {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Database!({this.state.selectRows},{this.state.selectResult})</Text>

        <Button onPress={this.press} title="查询数据"></Button>
      </View>
    );
  }
}

export default createBottomTabNavigator({
  Socket: { screen: SocketScreen },
  Database: { screen: DatabaseScreen },
});